<template>
    <view>
        <swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
            <swiper-item v-for="(item, index) in list" :key="index">
                <image :src="item.img" mode="aspectFit" class="img"></image>
            </swiper-item>
        </swiper>
        <view class="header">
            <text class="htext">精彩月赛</text>
            <text class="title" @click="tzgame">查看更多</text>
            <scroll-view class="scroll-view_H" scroll-x>
                <view class="scroll-view-item_H" v-for="(item, index) in game" :key="index">
                    <image :src="item.img" mode="aspectFill" class="game_img" style="float: left"></image>
                    <div style="
              float: left;
              display: block;
              color: aliceblue;
              font-size: 16px;
              font-weight: bold;
              width: 90%;
              text-align: left;
            ">
                        {{ item.title }}
                    </div>
                    <div style="
              float: left;
              display: block;
              color: rgb(224, 224, 224);
              font-size: 16px;
              font-weight: 500;
            ">
                        {{ item.city }} {{ item.opentime | dateFormat }}
                    </div>
                </view>
            </scroll-view>
        </view>
        <view class="header2">
            <text class="htext2">城市活动</text>
            <text class="title" @click="tzactivity">查看更多</text>
            <scroll-view class="scroll-view_H" scroll-x>
                <view class="scroll-view-item_H" v-for="(item, index) in hdlist" :key="index">
                    <image :src="item.img" mode="aspectFill" class="game_img" style="float: left"></image>
                    <div style="
              float: left;
              display: block;
              color: rgb(0, 0, 0);
              font-size: 16px;
              font-weight: bold;
              width: 90%;
              text-align: left;
            ">
                        {{ item.title }}
                    </div>
                    <div style="
              float: left;
              display: block;
              color: rgb(59, 59, 59);
              font-size: 16px;
              font-weight: 500;
            ">
                        {{ item.city }} {{ item.opentime | dateFormat }}
                    </div>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list: [],
            baseAPI: "http://10.10.235.248:8088",
            game: [],
            hdlist: []
        };
    },
    onLoad() {
        // this.getbanner();
        // this.getganme();
        // this.hd();
    },
    onShow() {
        this.checkAuth();
        this.getbanner();
        this.getganme();
        this.hd();

    },
    methods: {

        getbanner() {
            this.request({
                url: "/api/index/banner",
                method: "get",
            }).then((res) => {
                this.list = res.data.data;
                console.log("轮播", this.list);
            });
        },
        getganme() {
            this.request({
                url: "/game/list",
                method: "get",
            }).then((res) => {
                this.game = res.data.data;
                console.log("gamelist", this.game);
            });
        },
        hd() {
            console.log('asd');
            this.request({
                url: '/activity_config/activity_item/1',
                method: "get",
            }).then((res) => {
                this.hdlist = res.data.data
                console.log("hdlist", this.hdlist);
            });
        },
        tzgame() {
            uni.switchTab({
                url: '/pages/game/index'
            })
        },
        tzactivity() {
            uni.switchTab({
                url: '/pages/activity/index'
            })
        }
    },
};
</script>

<style>
.swiper {
    width: 100%;
    height: 1100rpx;
}

.img {
    width: 100%;
    height: 100%;
}

.game_img {
    width: 95%;
    height: 75%;
    border-radius: 6px !important;
}

.header {
    margin-top: 30rpx;
    height: 500rpx;
    /* width: 100%; */
    background-color: black;
    padding: 30rpx;
}

.header2 {
    margin-top: 30rpx;
    height: 500rpx;
    /* width: 100%; */
    padding: 30rpx;
}

.title {
    color: #8f8f94;
    font-size: 25rpx;
    float: right;
}

.htext {
    color: aliceblue;
    font-size: 35rpx;
    font-weight: bold;
}

.htext2 {
    color: rgb(0, 0, 0);
    font-size: 35rpx;
    font-weight: bold;
}

.scroll-view_H {
    white-space: nowrap;
    width: 100%;
    /* background-color: #fff; */
    height: 450rpx;
    /* height: 100%; */
    margin: 10px 0;
}

.scroll-view-item_H {
    display: inline-block;
    width: 85%;
    height: 100%;
    /* line-height: 300rpx; */
    text-align: center;
    font-size: 36rpx;
}
</style>
